<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
{literal}
<style type="text/css">
body,html{height:100%; overflow:hidden;}
body,html,div,iframe,p,ul,li,em,span,button{margin:0; padding:0;}
button{ line-height:normal;}
ul,ol{list-style:none;}
em,strong,span{ font-style:normal;}
.clear{clear:both; height:1px; overflow:hidden;}
.middle{ position:relative; height:100%; width:100%;}
#gisMap{ width:70%; float:right;}
.list_item{ position: relative;font-size: 12px;cursor:pointer;padding:2px 0 4px 2px;border-bottom:1px solid #C1FFC1}
.left{ width:30%; float:left; background-color:#d8d8d8; height:100%;}
.back { height:40px; line-height:40px;}
.head,.foot{height:60px; background-color:#000000;} 
#changeCity{ text-align:center; background-color:#FFFFFF;border:#f2f2f2 solid 1px; padding:3px 10px;cursor:pointer;}

.poiList{ position:relative;}
.poiList > p{ height:40px; line-height:40px; width:30%; background-color:#999; float:left; margin-right:1%; text-align:center; cursor:pointer;}
.poiList > ul{ position:absolute; width:100%; top:40px; left:0; overflow:auto; display:none;}
.poiList > ul li{ height:50px; line-height:50px; background-color:#eee; margin:5px auto; width:96%; text-indent:5px;cursor:pointer;}
.poiList > ul li span{ background-image:url(ui/ui/images/pois.png); padding:10px 15px;}
.poiList > p.current{background-color:#fff;}
.poiList > ul.current{background-color:#fff; display:block; height:100%;}

.button{position:absolute; right:0; top:0;  height:40px; line-height:40px; width:300px;}
.button li{ float:right; width:30%;background-color:#fff; margin-left:2%; text-align:center;}

.area{position:absolute; top:0; left:100px; background-color:#FFF; width:300px; padding:5px; border:#e4e4e4 solid 1px; display:none;}
.area ul{display:none;}
.area ul.show{display:block;}
.area ul li{display:inline-block; padding:5px; text-align:left; text-decoration:underline; color:#666; cursor:pointer;cursor:pointer;}
</style>
{/literal}
<link href="ui/ui/css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet">
<script src="ui/ui/js/jquery.js"></script>
<script src="ui/ui/js/jquery-ui-1.10.3.custom.min.js"></script>
<title>POI管理</title>
</head>
<body>
	<div class="head"></div>
    <div class="middle">
        <div class="left">
            <p class="back"><button style="width:100%; margin-top:10px;cursor:pointer;" onClick="history.back();">&lt;&lt;返回</button></p>
            <div class="poiList">
                <p class="current">地图</p>
                <ul class="searchMap current">
                	<p>在<label adcode="0" id="changeCity">选择城市</label><!--<select id="changeCity"><option>北京</option><option>上海</option></select>-->搜<input type="search" id="search"/><input type="button" value="搜索" id="execSearch"/></p>
                </ul>
                <p url="getPoiPoint">收藏</p>
                <ul class="collect">
                </ul>
                <p>已发送</p>
                <ul class="send">
                </ul>
            </div>
        </div>
        <div id="gisMap" class="right">
       <!-- <div class="button">
        	<ul>
            	<li><button>自定义地点</button></li>
                <li><button onClick="map.roadInfo();">实时路况</button></li>
                <li><button>地铁线路</button></li>
            </ul>
        </div>-->
        <iframe id="gis" src="?path=map&action=map&method=amap" width="100%" height="100%" scrolling="no" frameborder="0"></iframe></div>
        <ul class="ui-autocomplete" id="autocomplete" tabindex="0" aria-disabled="false"></ul>
        <div class="clear"></div>
    </div>
    <div class="foot"></div>
</body>
</html>
{literal}
<script type="text/javascript" language="javascript">
var CMap, map;
$.fn.inputComplete = function (options) {
	var defaults = {
		city: '北京'
	};
	options = $.extend(defaults, options);
	return this.each(function () {
		var $this = $(this);
		$this.on('input', function () {
			map.autoComplete(this.value, options.city, function (data){
				$this.autocomplete({minLength: 0, source: data.list||[]})
				$this.autocomplete('search', '');
			});
		});
	});
};
function resizeWin(){
	var gis = $("#gis");
	var height = $(document.body).height() - 120;
	$(".middle").height(height);
	$(".middle > div ").height(height);
	$(".poiList").height(height-80);
	var position = {height:gis.height(),width:gis.width(),display:'block'}
	gis.contents().find("#imap").css(position);	
}
$(document).on('resize',resizeWin);
$("#gis").load(function(e){
	resizeWin();
	CMap = this.contentWindow.CMap;
    map = new CMap({
		server:'',//服务请求地址
		imgprefix:'ui/ui/images/',//图片路径
		level: 10,//设置地图缩放级别
		center:{lng:116.397428,lat:39.90923},//设置地图中心点
		zooms: [3, 18],//地图视野级别范围
		touchZoom: false,//是否支持手势缩放。
		resizeEnable: true,//是否监控地图容器发生变化
		doubleClickZoom: true,//双击放大地图
		scrollWheel: true//鼠标滚轮缩放地图
	});
	
	$('#execSearch').on('click', function () {
		var city = $("#changeCity").html();
		var cenKeyword = $("#search").val();
		var keywords = '';
		var range = 1E3;
		map.poiSearch(keywords, cenKeyword, city,function(ret){
			if( ret.status == 'E0' ){
				var list = $.map(ret.list,function(el,index){ return "<li idx=\""+index+"\" info=\"{'telephone':'"+el.tel+"','longitude':'"+el.x+"','latitude':'"+el.y+"','address':'"+el.address+"','name':'"+el.name+"',keyword:'"+cenKeyword+"'}\"><span style=\"background-position:-"+(index*32)+"px -135px\"></span><em style=\"float:right;\">收藏</em>"+el.name+"</li>";});
				var current = $(".current");
				$(".current li").unbind("click").remove()
				current.append(list.join('')).find('li').bind('click',function(){
					var index = ~~$(this).attr("idx") + 1;
					map.showMarker('marker_poi_'+index);
				});
				current.find("em").on('click',function(){
					var info = $(this).parent().attr("info");//new Function("return "+$(this).parent().attr("info"))();
					ajax('savePoiPointPost',info,'POST',function(ret){
						if( ret.code == 1 ){alert('保存成功.');}	
					});
					return false;
				});
			}else{
				
			}
		});
	});
	
	$("#changeCity").on("click",function(){
		var position = $(this).offset();
		position.top += 26;
		$(".area").show().css(position).find("ul.show").removeClass('show');
		$(".area #prvoince").addClass('show')
	});
	
	function setCurrent(){
		$(this).parent().find(".current").removeClass('current');
		$(this).addClass('current');
		$(this).next('ul:first').addClass('current');
	};
	
	$(".searchMap").prev().on('click',function(){
		setCurrent.call(this);
		$(".searchMap").find("li").unbind('click').remove();
		$("#execSearch").trigger('click');
		//if( $("#search").val() ){$("#execSearch").trigger('click');}
	});
	
	//搜藏位置点处理
	$(".collect").prev().on('click',function(){
		setCurrent.call(this);
		ajax('getPoiPoint','','GET',function(ret){
						if( ret.code == 1 ){
							map.diyPoint(ret.favourites.item);
							var ret = $.map(ret.favourites.item,function(el,index){ return "<li idx=\""+index+"\" info=\"{'telephone':'"+el.tel+"','longitude':'"+el.longitude+"','latitude':'"+el.latitude+"','address':'"+el.address+"','name':'"+el.name+"','poiid':'"+el.poiid+"'}\"><span style=\"background-position:-"+(index*32)+"px -135px\"></span><em style=\"float:right;\">删除</em>"+el.name+"</li>";});
							$(".collect").unbind('click').html(ret).on('click',function(e){
								var _t = $(e.target || e.srcElement);
								switch(_t.get(0).tagName){
									case 'EM':
										var info = new Function("return "+_t.parent().attr('info'))();
										if( !confirm('您确定要删除"'+info.name+'"这个位置吗?') )return false;
										ajax('deletePoiPoint',{poiid:info.poiid},'GET',function(ret){
											if( ret.code == 1 ){
												_t.parent().remove();
												alert('删除成功');
											}else{
												alert('删除失败');	
											}
										});
										break;
									case 'LI':
										var info = new Function("return "+_t.attr('info'))();
										map.setZoom(18);
										map.setCenter(info.longitude+','+info.latitude);
										map.showMarker('marker_poi_'+((~~_t.attr('idx'))+1));
										break;	
								}
							});
						}
					});	
	});
	//已发送位置点处理
	$(".send").prev().on('click',function(){
		setCurrent.call(this);
		ajax('getSendPoiPoint','','GET',function(ret){
						if( ret.code == 1 ){
							map.diyPoint(ret.favourites.item);
							var ret = $.map(ret.favourites.item,function(el,index){ return "<li idx=\""+index+"\" info=\"{'telephone':'"+el.tel+"','longitude':'"+el.longitude+"','latitude':'"+el.latitude+"','address':'"+el.address+"','name':'"+el.name+"','sendid':'"+el.sendid+"'}\"><span style=\"background-position:-"+(index*32)+"px -135px\"></span><em style=\"float:right;\">删除</em>"+el.name+"</li>";});
							$(".send").unbind('click').html(ret).on('click',function(e){
								var _t = $(e.target || e.srcElement);
								switch(_t.get(0).tagName){
									case 'EM':
										var info = new Function("return "+_t.parent().attr('info'))();
										if( !confirm('您确定要删除"'+info.name+'"这个位置吗?') )return false;
										ajax('deleteSendPoiPoint',{sendid:info.sendid},'GET',function(ret){
											if( ret.code == 1 ){
												_t.parent().remove();
												alert('删除成功');
											}else{
												alert('删除失败');	
											}
										});
										break;
									case 'LI':
										var info = new Function("return "+_t.attr('info'))();
										map.setZoom(18);
										map.setCenter(info.longitude+','+info.latitude);
										map.showMarker('marker_poi_'+((~~_t.attr('idx'))+1));
										break;	
								}
							});
						}
					});	
	});
	var city = getParam('city');
	var search = getParam('search');
	var adcode = getParam('adcode');
	if( city && search ){
		$("#changeCity").attr("adcode",adcode).html(city);
		$("#search").val(search);
		$('#execSearch').trigger('click');
	}
});

function ajax(url,data,type,fn){
	url = '?path=map&action=map&method='+url;
	type = type || 'GET';
	$.ajax({url:url,data:data,type:type,contentType:"json",success: function(ret){
		if( ret.code == 1 ){
			fn && fn(ret);
		}
	},error:function(msg){
		//alert(ret.description);	
	}});
}
getPrvoince();
function getPrvoince(){
	ajax('?path=map&action=map&method=getPrvoince',{},'GET',function(ret){
		if( ret.code == 1 ){
			var r = ret.city_list.city;
			var html = $.map(r,function(el,index){
				return "<li adcode=\""+el.adcode+"\">"+el.name_zh+"</li>";
			}).join('');
			var area = $("<div class=\"area\"></div>").html("<ul id=\"prvoince\" class=\"show\">"+html+'</ul>');
			$(document.body).append(area);
			$(".area").on('click',function(e){
				var _t = $(e.target || e.srcElement);
				if ( _t.get(0).tagName != "LI" ) {return false;}
				if( _t.parent().attr('id') == 'prvoince' ){
					getCity(_t.attr('adcode'));
				}else{
					changeCity(_t.attr('adcode'),_t.html());
				}
			});
		}else{
			console.log(ret.message);	
		}
	})	
}
function changeCity(adcode,cityName){
	$("#changeCity").attr('adcode',adcode).html(cityName);
	map.setCity(adcode);
	$('#search').inputComplete({city:cityName});
	$(".area").hide();
}
function getCity(adcode){
	var _t = $("#A"+adcode);
	if( _t.size() > 0 ){
		$(".area ul.show").removeClass('show');
		_t.addClass('show');
		return false;
	}
	ajax('?path=map&action=map&method=getCity',{adcode:adcode},'GET',function(ret){	
		if( ret.code == 1 ){
			var r = ret.city_list.city;
			var html = $.map(r,function(el,index){
				return "<li adcode=\""+el.adcode+"\">"+el.name_zh+"</li>";
			}).join('');
			$(".area").append("<ul id=\"A"+adcode+"\">"+html+"</ul>");
			getCity(adcode);
		}else{
			alert(ret.message);
		}
	});
}

function getParam(name){
	try{
		var search = location.search.substr(1);
		var params = search.split('&');
		var val = new Array();
		for( var p in params ){
			val = params[p].split('=');	
			if( val[0] == name ){
				return decodeURIComponent(val[1]);	
			}
		}
	}catch(e){
		console.log(e);
	}
}
</script>
{/literal}
